<template>
	<view>
		<view class="fixedit" :style="{top:top}">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in category" :key="index" :data-cateid="cate.key" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
				 @tap="tabChange">{{cate.value}}</view>
			</scroll-view>
		</view>
		<view style="height:50px;"></view>
		<!-- 文章内容区 -->
		<view class="grace-news-list" style="width:94%; padding:5px 3%;">
			<view v-for="(item, index) in browserAll" :key="index">
				<view class="grace-news-list-items" @click="goDetail(item.resourceType,item.id)">
					<view class="grace-news-list-title">
						<view class="grace-news-list-title-main">{{index+1}}. {{item.resourceTitle}}</view>
						<text class="grace-news-list-title-desc grace-text-overflow">
							日期：{{item.createTime}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align:center;" v-show="dataShow">数据为空</view>				
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var page = 1,
		cate = '';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid', 'databaseInfo'])
		},
		data() {
			return {
				serverUrl: this.serverUrl,
				top: 0,
				// 当前选择的分类
				cateCurrentIndex: 0,
				// 演示文章数据
				browserAll: [],
				category: [{
						"key": "",
						"value": "全部"
				}],
				dataShow: false
			};
		},
		onLoad: function() {
			this.category = this.category.concat(this.databaseInfo);			
			// #ifdef H5
			this.top = '44px';
			// #endif
			page = 1;
			artList: [];
			this.getMyBrowser();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			this.browserAll = [];
			this.getMyBrowser();
		},
		// 加载更多
		onReachBottom: function() {
			this.getMyBrowser();
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			goDetail(type, id) {
				if (type == 'xwzx') {
					uni.navigateTo({
						url: "/pages/news/detail/detail?id=" + id + "&type=" + type
					})
				} else {
					uni.navigateTo({
						url: "/pages/search/detail/detail?id=" + id + "&type=" + type
					})
				}

			},
			getMyBrowser: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'user-api/getMyBrowser',
					data: {
						resourceType: cate,
						username: this.userInfo.username,
						pageNumber: page,
						pageSize: 12,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.browserAll.length < 1) {
									this.dataShow = true;
								}else{
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							}else{
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.length; i++) {
								this.browserAll = this.browserAll.concat(r.data.data[i]);
							}
							page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cateid;
				this.cateCurrentIndex = index;

				// 读取分类数据
				cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据 
				page = 1;
				this.browserAll = [];
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				this.getMyBrowser();
			}
		}
	}
</script>
<style>
	/* 分段器头部 fixed 定位 */
	.fixedit {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.grace-tab-title view {
		padding: 0 4px;
		margin: 0 8px;
		line-height: 35px;
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}
</style>
